<!doctype html><html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>3-5 product-list.jsp页面制作</title>
  <meta name="generator" content="CherryTree">
  <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body><div class="main"><div class="tree">
<p><strong>Index</strong></p>
<p><a href="笔记本--java--项目--ssm综合练习_权限管理.html">ssm综合练习 权限管理</a></p>

<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--1_数据库表预览.html">1 数据库表预览</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--2_maven聚合工程的创建.html">2 maven聚合工程的创建</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--3_产品操作.html">3 产品操作</a></li>
<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--3_产品操作--3-0_数据库创建与表结构.html">3-0 数据库创建与表结构</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--3_产品操作--3-1_创建实体类.html">3-1 创建实体类</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--3_产品操作--3-2_持久层接口.html">3-2 持久层接口</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--3_产品操作--3-3_编写业务层.html">3-3 编写业务层</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--3_产品操作--3-4_web层代码.html">3-4 web层代码</a></li>
<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--3_产品操作--3-4_web层代码--3-4-1_完善__格式化时间和状态.html">3-4-1 完善  格式化时间和状态</a></li>
</ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--3_产品操作--3-5_product-list.jsp页面制作.html">3-5 product-list.jsp页面制作</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--3_产品操作--3-6_添加产品.html">3-6 添加产品</a></li>
</ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作.html">4 订单操作</a></li>
<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作--1_查询所有信息.html">1 查询所有信息</a></li>
<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作--1_查询所有信息--1-1_会员信息表和订单数据库表，旅客表.html">1-1 会员信息表和订单数据库表，旅客表</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作--1_查询所有信息--1-2_实体类.html">1-2 实体类</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作--1_查询所有信息--1-3_dao.html">1-3 dao</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作--1_查询所有信息--1-4_service.html">1-4 service</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作--1_查询所有信息--1-5_controller.html">1-5 controller</a></li>
</ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作--2_分页查询所有.html">2 分页查询所有</a></li>
<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作--2_分页查询所有--2-1_pageHelpe的使用.html">2-1 pageHelpe的使用</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作--2_分页查询所有--2-2_分页查询.html">2-2 分页查询</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作--2_分页查询所有--2-3_视图分页.html">2-3 视图分页</a></li>
</ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--4_订单操作--3_查询详情.html">3 查询详情</a></li>
</ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限.html">5 权限</a></li>
<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--1_springSecurity.html">1 springSecurity</a></li>
<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--1_springSecurity--1_配置文件登录基础使用.html">1 配置文件登录基础使用</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--1_springSecurity--2_自定义页面.html">2 自定义页面</a></li>
</ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--2_使用springSecurity数据库验证登录.html">2 使用springSecurity数据库验证登录</a></li>
<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--2_使用springSecurity数据库验证登录--1_创建数据库和实体类.html">1 创建数据库和实体类</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--2_使用springSecurity数据库验证登录--2_修改web.xml文件.html">2 修改web.xml文件</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--2_使用springSecurity数据库验证登录--3_添加springSecurity.xml.html">3 添加springSecurity.xml</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--2_使用springSecurity数据库验证登录--4_service曾接口.html">4 service曾接口</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--2_使用springSecurity数据库验证登录--5_mapper.html">5 mapper</a></li>
</ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--3_查询所有用户.html">3 查询所有用户</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--4_添加用户.html">4 添加用户</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--4-1_添加用户加密.html">4-1 添加用户加密</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--5_权限--4-2_加密密码登录.html">4-2 加密密码登录</a></li>
</ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--6_用户详情.html">6 用户详情</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--7_角色.html">7 角色</a></li>
<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--7_角色--1_添加角色.html">1 添加角色</a></li>
</ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--8_权限查询和添加.html">8 权限查询和添加</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--9_用户和角色的关联.html">9 用户和角色的关联</a></li>
<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--9_用户和角色的关联--1_用户添加角色.html">1 用户添加角色</a></li>
</ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--10_角色关联权限.html">10 角色关联权限</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--11_方法级别的权限控制.html">11 方法级别的权限控制</a></li>
<ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--11_方法级别的权限控制--1_JSR-250.html">1 JSR-250</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--11_方法级别的权限控制--2_secured.html">2 secured</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--11_方法级别的权限控制--3_表达式注解.html">3 表达式注解</a></li>
</ol>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--12_页面使用权限标签.html">12 页面使用权限标签</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--13_AOP切面通知.html">13 AOP切面通知</a></li>
<li><a href="笔记本--java--项目--ssm综合练习_权限管理--14_页面查看日志.html">14 页面查看日志</a></li>
</ol></div>
<div class="page"><h1><b><u>3-5 product-list.jsp页面制作</u></b></h1><br /><br />• 之前的product-list.jsp页面是直接复制的，此处我们使用AdminLTE制作product-list.jsp<br />• AdminLTE的主要样式已经导入我们的web工程了<br />• <img src="images\40-1.png" alt="images\40-1.png" /><br />• 那么我们在pages页面下创建一个product-list1.jsp<br />• 找到之前下载的定制版AdminLTE中的html页面代码<br />• <img src="images\40-2.png" alt="images\40-2.png" /><br />• 将里面的代码复制到product-list1.jsp中，注意保留jsp头文件并修改样式路劲，替换成功后<br />• AdminLTE中分4部分，将头部和导航使用jsp代码进行引入替换<br />• 原<img src="images\40-3.png" alt="images\40-3.png" /><br />• 新<img src="images\40-4.png" alt="images\40-4.png" /><br />• 内容区我们需要修改数据列表<br />•旧 <img src="images\40-5.png" alt="images\40-5.png" /><br />• 新<img src="images\40-6.png" alt="images\40-6.png" /><br />• 将多余的tr删除，只保留一个tr<br />• <img src="images\40-7.png" alt="images\40-7.png" /><br />• 头部导入jstl核心库<br />• <img src="images\40-8.png" alt="images\40-8.png" /><br />• 将tr标签使用jstl表达式循环遍历数据<br />• <img src="images\40-9.png" alt="images\40-9.png" /><br />• 记住需要修改controller中modelAndView中的返回页面<br />• <img src="images\40-10.png" alt="images\40-10.png" /><br />• 为了待会测试的准确，我们将product-list1.jsp的title换一下<br />• <img src="images\40-11.png" alt="images\40-11.png" /><br />• 启动项目测试<br />• <img src="images\40-12.png" alt="images\40-12.png" /><br />•因为index页面不好看，我们添加main页面 <br />• main页面代码<br />• <div class="codebox"><div class="codebox">&lt;%@&nbsp;page&nbsp;language=<span style="color:#3ad900;font-weight:400">"java"</span>&nbsp;contentType=<span style="color:#3ad900;font-weight:400">"text/html;&nbsp;charset=UTF-8"</span><br />	pageEncoding=<span style="color:#3ad900;font-weight:400">"UTF-8"</span>%&gt;<br />&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;<span style="color:#3ad900;font-weight:400">"-//W3C//DTD&nbsp;HTML&nbsp;4.01&nbsp;Transitional//EN"</span>&nbsp;<span style="color:#3ad900;font-weight:400">"http://www.w3.org/TR/html4/loose.dtd"</span>&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;!--&nbsp;页面meta&nbsp;--&gt;<br />&lt;meta&nbsp;charset=<span style="color:#3ad900;font-weight:400">"utf-8"</span>&gt;<br />&lt;meta&nbsp;http-equiv=<span style="color:#3ad900;font-weight:400">"X-UA-Compatible"</span>&nbsp;content=<span style="color:#3ad900;font-weight:400">"IE=edge"</span>&gt;<br /><br />&lt;title&gt;ITCAST&nbsp;-&nbsp;AdminLTE2定制版&lt;/title&gt;<br />&lt;meta&nbsp;name=<span style="color:#3ad900;font-weight:400">"description"</span>&nbsp;content=<span style="color:#3ad900;font-weight:400">"AdminLTE2定制版"</span>&gt;<br />&lt;meta&nbsp;name=<span style="color:#3ad900;font-weight:400">"keywords"</span>&nbsp;content=<span style="color:#3ad900;font-weight:400">"AdminLTE2定制版"</span>&gt;<br /><br />&lt;!--&nbsp;Tell&nbsp;the&nbsp;browser&nbsp;to&nbsp;be&nbsp;responsive&nbsp;to&nbsp;screen&nbsp;width&nbsp;--&gt;<br />&lt;meta<br />	content=<span style="color:#3ad900;font-weight:400">"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"</span><br />	name=<span style="color:#3ad900;font-weight:400">"viewport"</span>&gt;<br />&lt;!--&nbsp;Bootstrap&nbsp;<span style="color:#ff0044;font-weight:400">3.3.6</span>&nbsp;--&gt;<br />&lt;!--&nbsp;Font&nbsp;Awesome&nbsp;--&gt;<br />&lt;!--&nbsp;Ionicons&nbsp;--&gt;<br />&lt;!--&nbsp;iCheck&nbsp;--&gt;<br />&lt;!--&nbsp;Morris&nbsp;chart&nbsp;--&gt;<br />&lt;!--&nbsp;jvectormap&nbsp;--&gt;<br />&lt;!--&nbsp;Date&nbsp;Picker&nbsp;--&gt;<br />&lt;!--&nbsp;Daterange&nbsp;picker&nbsp;--&gt;<br />&lt;!--&nbsp;Bootstrap&nbsp;time&nbsp;Picker&nbsp;--&gt;<br />&lt;!--&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span>&nbsp;href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/${pageContext.request.contextPath}/${pageContext.request.contextPath}/plugins/timepicker/bootstrap-timepicker.min.css"</span>&gt;--&gt;<br />&lt;!--&nbsp;bootstrap&nbsp;wysihtml5&nbsp;-&nbsp;text&nbsp;editor&nbsp;--&gt;<br />&lt;!--数据表格--&gt;<br />&lt;!--&nbsp;表格树&nbsp;--&gt;<br />&lt;!--&nbsp;select2&nbsp;--&gt;<br />&lt;!--&nbsp;Bootstrap&nbsp;Color&nbsp;Picker&nbsp;--&gt;<br />&lt;!--&nbsp;bootstrap&nbsp;wysihtml5&nbsp;-&nbsp;text&nbsp;editor&nbsp;--&gt;<br />&lt;!--bootstrap-markdown--&gt;<br />&lt;!--&nbsp;Theme&nbsp;style&nbsp;--&gt;<br />&lt;!--&nbsp;AdminLTE&nbsp;Skins.&nbsp;Choose&nbsp;a&nbsp;skin&nbsp;from&nbsp;the&nbsp;css/skins<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;folder&nbsp;instead&nbsp;of&nbsp;downloading&nbsp;all&nbsp;of&nbsp;them&nbsp;to&nbsp;reduce&nbsp;the&nbsp;load.&nbsp;--&gt;<br />&lt;!--&nbsp;Ion&nbsp;Slider&nbsp;--&gt;<br />&lt;!--&nbsp;ion&nbsp;slider&nbsp;Nice&nbsp;--&gt;<br />&lt;!--&nbsp;bootstrap&nbsp;slider&nbsp;--&gt;<br />&lt;!--&nbsp;HTML5&nbsp;Shim&nbsp;and&nbsp;Respond.js&nbsp;IE8&nbsp;support&nbsp;of&nbsp;HTML5&nbsp;elements&nbsp;and&nbsp;media&nbsp;queries&nbsp;--&gt;<br />&lt;!--&nbsp;WARNING:&nbsp;Respond.js&nbsp;doesn't&nbsp;work&nbsp;<span style="color:#ff9d00;font-weight:700">if</span>&nbsp;you&nbsp;view&nbsp;the&nbsp;page&nbsp;via&nbsp;file:<span style="color:#0088ff;font-weight:400">//&nbsp;--&gt;</span><br />&lt;!--[<span style="color:#ff9d00;font-weight:700">if</span>&nbsp;lt&nbsp;IE&nbsp;<span style="color:#ff0044;font-weight:400">9</span>]&gt;<br />&nbsp;&nbsp;&lt;script&nbsp;src=<span style="color:#3ad900;font-weight:400">"https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"</span>&gt;&lt;/script&gt;<br />&nbsp;&nbsp;&lt;script&nbsp;src=<span style="color:#3ad900;font-weight:400">"https://oss.maxcdn.com/respond/1.4.2/respond.min.js"</span>&gt;&lt;/script&gt;<br />&nbsp;&nbsp;&lt;![endif]--&gt;<br /><br />&lt;!--&nbsp;jQuery&nbsp;<span style="color:#ff0044;font-weight:400">2.2.3</span>&nbsp;--&gt;<br />&lt;!--&nbsp;jQuery&nbsp;UI&nbsp;<span style="color:#ff0044;font-weight:400">1.11.4</span>&nbsp;--&gt;<br />&lt;!--&nbsp;Resolve&nbsp;conflict&nbsp;in&nbsp;jQuery&nbsp;UI&nbsp;tooltip&nbsp;with&nbsp;Bootstrap&nbsp;tooltip&nbsp;--&gt;<br />&lt;!--&nbsp;Bootstrap&nbsp;<span style="color:#ff0044;font-weight:400">3.3.6</span>&nbsp;--&gt;<br />&lt;!--&nbsp;Morris.js&nbsp;charts&nbsp;--&gt;<br />&lt;!--&nbsp;Sparkline&nbsp;--&gt;<br />&lt;!--&nbsp;jvectormap&nbsp;--&gt;<br />&lt;!--&nbsp;jQuery&nbsp;Knob&nbsp;Chart&nbsp;--&gt;<br />&lt;!--&nbsp;daterangepicker&nbsp;--&gt;<br />&lt;!--&nbsp;datepicker&nbsp;--&gt;<br />&lt;!--&nbsp;Bootstrap&nbsp;WYSIHTML5&nbsp;--&gt;<br />&lt;!--&nbsp;Slimscroll&nbsp;--&gt;<br />&lt;!--&nbsp;FastClick&nbsp;--&gt;<br />&lt;!--&nbsp;iCheck&nbsp;--&gt;<br />&lt;!--&nbsp;AdminLTE&nbsp;App&nbsp;--&gt;<br />&lt;!--&nbsp;表格树&nbsp;--&gt;<br />&lt;!--&nbsp;select2&nbsp;--&gt;<br />&lt;!--&nbsp;bootstrap&nbsp;color&nbsp;picker&nbsp;--&gt;<br />&lt;!--&nbsp;bootstrap&nbsp;time&nbsp;picker&nbsp;--&gt;<br />&lt;!--&lt;script&nbsp;src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/${pageContext.request.contextPath}/${pageContext.request.contextPath}/plugins/timepicker/bootstrap-timepicker.min.js"</span>&gt;&lt;/script&gt;--&gt;<br />&lt;!--&nbsp;Bootstrap&nbsp;WYSIHTML5&nbsp;--&gt;<br />&lt;!--bootstrap-markdown--&gt;<br />&lt;!--&nbsp;CK&nbsp;Editor&nbsp;--&gt;<br />&lt;!--&nbsp;InputMask&nbsp;--&gt;<br />&lt;!--&nbsp;DataTables&nbsp;--&gt;<br />&lt;!--&nbsp;ChartJS&nbsp;<span style="color:#ff0044;font-weight:400">1.0.1</span>&nbsp;--&gt;<br />&lt;!--&nbsp;FLOT&nbsp;CHARTS&nbsp;--&gt;<br />&lt;!--&nbsp;FLOT&nbsp;RESIZE&nbsp;PLUGIN&nbsp;-&nbsp;allows&nbsp;the&nbsp;chart&nbsp;to&nbsp;redraw&nbsp;when&nbsp;the&nbsp;window&nbsp;is&nbsp;resized&nbsp;--&gt;<br />&lt;!--&nbsp;FLOT&nbsp;PIE&nbsp;PLUGIN&nbsp;-&nbsp;also&nbsp;used&nbsp;to&nbsp;draw&nbsp;donut&nbsp;charts&nbsp;--&gt;<br />&lt;!--&nbsp;FLOT&nbsp;CATEGORIES&nbsp;PLUGIN&nbsp;-&nbsp;Used&nbsp;to&nbsp;draw&nbsp;bar&nbsp;charts&nbsp;--&gt;<br />&lt;!--&nbsp;jQuery&nbsp;Knob&nbsp;--&gt;<br />&lt;!--&nbsp;Sparkline&nbsp;--&gt;<br />&lt;!--&nbsp;Morris.js&nbsp;charts&nbsp;--&gt;<br />&lt;!--&nbsp;Ion&nbsp;Slider&nbsp;--&gt;<br />&lt;!--&nbsp;Bootstrap&nbsp;slider&nbsp;--&gt;<br />&lt;!--&nbsp;页面meta&nbsp;/--&gt;<br /><br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/iCheck/square/blue.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/morris/morris.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/select2/select2.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/css/style.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css"</span>&gt;<br />&lt;link&nbsp;rel=<span style="color:#3ad900;font-weight:400">"stylesheet"</span><br />	href=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css"</span>&gt;<br />&lt;/head&gt;<br /><br />&lt;body&nbsp;<span style="color:#80ffbb;font-weight:400">class</span>=<span style="color:#3ad900;font-weight:400">"hold-transition&nbsp;skin-blue&nbsp;sidebar-mini"</span>&gt;<br /><br />	&lt;div&nbsp;<span style="color:#80ffbb;font-weight:400">class</span>=<span style="color:#3ad900;font-weight:400">"wrapper"</span>&gt;<br /><br />		&lt;!--&nbsp;页面头部&nbsp;--&gt;<br />		&lt;jsp:include&nbsp;page=<span style="color:#3ad900;font-weight:400">"header.jsp"</span>&gt;&lt;/jsp:include&gt;<br />			&lt;!--&nbsp;页面头部&nbsp;/--&gt;<br /><br />		&lt;!--&nbsp;导航侧栏&nbsp;--&gt;<br />		&lt;jsp:include&nbsp;page=<span style="color:#3ad900;font-weight:400">"aside.jsp"</span>&gt;&lt;/jsp:include&gt;<br />		&lt;!--&nbsp;导航侧栏&nbsp;/--&gt;<br /><br />		&lt;!--&nbsp;内容区域&nbsp;--&gt;<br />		&lt;div&nbsp;<span style="color:#80ffbb;font-weight:400">class</span>=<span style="color:#3ad900;font-weight:400">"content-wrapper"</span>&gt;<br /><br />			&lt;img&nbsp;src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/img/center.jpg"</span><br />				width=<span style="color:#3ad900;font-weight:400">"100%"</span>&nbsp;height=<span style="color:#3ad900;font-weight:400">"100%"</span>&nbsp;/&gt;<br /><br />		&lt;/div&gt;<br />		&lt;!--&nbsp;内容区域&nbsp;/--&gt;<br /><br />		&lt;!--&nbsp;底部导航&nbsp;--&gt;<br />		&lt;footer&nbsp;<span style="color:#80ffbb;font-weight:400">class</span>=<span style="color:#3ad900;font-weight:400">"main-footer"</span>&gt;<br />		&lt;div&nbsp;<span style="color:#80ffbb;font-weight:400">class</span>=<span style="color:#3ad900;font-weight:400">"pull-right&nbsp;hidden-xs"</span>&gt;<br />			&lt;b&gt;Version&lt;/b&gt;&nbsp;<span style="color:#ff0044;font-weight:400">1.0.8</span><br />		&lt;/div&gt;<br />		&lt;strong&gt;Copyright&nbsp;&amp;copy;&nbsp;<span style="color:#ff0044;font-weight:400">2014</span>-<span style="color:#ff0044;font-weight:400">2017</span>&nbsp;&lt;a<br />			href=<span style="color:#3ad900;font-weight:400">"http://www.itcast.cn"</span>&gt;研究院研发部&lt;/a&gt;.<br />		&lt;/strong&gt;&nbsp;All&nbsp;rights&nbsp;reserved.&nbsp;&lt;/footer&gt;<br />		&lt;!--&nbsp;底部导航&nbsp;/--&gt;<br /><br />	&lt;/div&gt;<br /><br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script&gt;<br />		$.widget.bridge('uibutton',&nbsp;$.ui.button);<br />	&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/morris/morris.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"</span>&gt;&lt;/script&gt;<br />	&lt;script<br />		src=<span style="color:#3ad900;font-weight:400">"${pageContext.request.contextPath}/plugins/bootstrap-slider/bootstrap-slider.js"</span>&gt;&lt;/script&gt;<br />	&lt;script&gt;<br />		$(document).ready(function()&nbsp;{<br />			<span style="color:#0088ff;font-weight:400">//&nbsp;选择框</span><br />			$(<span style="color:#3ad900;font-weight:400">".select2"</span>).select2();<br /><br />			<span style="color:#0088ff;font-weight:400">//&nbsp;WYSIHTML5编辑器</span><br />			$(<span style="color:#3ad900;font-weight:400">".textarea"</span>).wysihtml5({<br />				locale&nbsp;:&nbsp;'zh-CN'<br />			});<br />		});<br /><br />		<span style="color:#0088ff;font-weight:400">//&nbsp;设置激活菜单</span><br />		function&nbsp;setSidebarActive(tagUri)&nbsp;{<br />			var&nbsp;liObj&nbsp;=&nbsp;$(<span style="color:#3ad900;font-weight:400">"#"</span>&nbsp;+&nbsp;tagUri);<br />			<span style="color:#ff9d00;font-weight:700">if</span>&nbsp;(liObj.length&nbsp;&gt;&nbsp;<span style="color:#ff0044;font-weight:400">0</span>)&nbsp;{<br />				liObj.parent().parent().addClass(<span style="color:#3ad900;font-weight:400">"active"</span>);<br />				liObj.addClass(<span style="color:#3ad900;font-weight:400">"active"</span>);<br />			}<br />		}<br /><br />		$(document).ready(function()&nbsp;{<br />			<span style="color:#0088ff;font-weight:400">//&nbsp;激活导航位置</span><br />			setSidebarActive(<span style="color:#3ad900;font-weight:400">"admin-index"</span>);<br />		});<br />	&lt;/script&gt;<br />&lt;/body&gt;<br /><br />&lt;/html&gt;</div></div><br />• 修改index页面为自动重定向到main页面<br />• <img src="images\40-13.png" alt="images\40-13.png" /><br />• 访问index页面自动跳转main页面，效果如下<br />• <img src="images\40-14.png" alt="images\40-14.png" /><br /> 主页为图片一张<br /><img src="images\40-15.png" alt="images\40-15.png" /></div></div>
</body></html>